import { PropType } from "vue";
import "./item-block.scss";
export default defineComponent({
	props: {
		icon: String,
		title: String,
		unit: String,
		subject: {
			type: Object as PropType<{ label: String; value: String | Number; unit?: String }>,
			default() {
				return {};
			}
		}
	},
	emits: [],
	setup(props, { slots }) {
		return () => {
			return (
				<div class="item-block">
					<div class="title">
						<div class="flex items-center">
							<div class="icon">{slots.titleIcon?.()}</div>
							<div class="text">{props.title}</div>
							<div class="ext-icon"></div>
						</div>
						<div class="tips">{slots.unit?.() || props.unit}</div>
					</div>
					<div class="body">
						{slots.subjectInfo ? slots.subjectInfo() : null}
						{slots.subjectIcon ? (
							<div class="subject">
								<div class="icon">{slots.subjectIcon?.()}</div>
								<div class="information">
									<div class="label">{props.subject.label}</div>
									<div class="value">
										<div class="text">{props.subject.value}</div>
										<div class="unit">{props.subject.unit}</div>
									</div>
								</div>
							</div>
						) : null}
						<div class="content">{slots.default?.()}</div>
					</div>
				</div>
			);
		};
	}
});
